<template>
  <div class="green-main" :style="{backgroundColor:getcolor()}">
    <div class="box-border" :style="{borderColor:getcolor()}"></div>
    <!-- 左侧动态百分比 -->
    <div class="left-data">
      <div class="ani">
        <i v-if="cardMessage.ststus ==='HIGH'" class="el-icon-top animation"></i>
        <i v-else-if="cardMessage.ststus ==='LOW'" class="el-icon-bottom animation"></i>
        <div v-else-if="cardMessage.ststus ==='EQ'" class="con-line"></div>
      </div>
      <div>{{ cardMessage.td }}</div>
    </div>
    <!-- 中间数据展示 -->
    <div class="center-data">
      <div class="data-two">{{ cardMessage.tb }}</div>
      <div class="data-one">{{ cardMessage.ta }}</div>
    </div>
    <!-- 右边温度计展示 -->
    <div class="right-data">
      {{ cardMessage.tc }}
    </div>
    <div class="circle-box"></div>
  </div>
</template>
<script>
export default {
  props: {
    nowSelectDataItemId: {
      type: Number,
      default: () => {
        return 0
      }
    },
    nowCardMessage: {
      type: Object,
      default: () => {
        return {
        }
      }
    }
  },
  data() {
    return {
      cardMessage: {
      }
    }
  },
  watch: {
    nowSelectDataItemId: {
      handler(newvalue, oldvalue) {
        this.nowSelectDataItemId = newvalue
      },
      deep: true
    },
    // var that = this
    nowCardMessage: {
      handler(newvalue, oldvalue) {
        this.cardMessage = {
          ta: newvalue.latestValue || '' + newvalue.symbol || '',
          tb: newvalue.latestDate ? this.$moment(newvalue.latestDate).format("MM-DD HH:mm:ss") : '',
          tc: newvalue.dataItemName || '',
          dataItemId: newvalue.dataItemId || '',
          td: newvalue.dValue || '', // 百分比
          dataTypeId: newvalue.dataTypeId || '', // 环境数据类型
          ststus: newvalue.direction || '' // HIGH上 LOW下 EQ平
        }
      },
      deep: true,
      immediate: true
    }

  },
  methods: {
    // 颜色
    getcolor() {
      var color = ''
      if (Number(this.nowSelectDataItemId) === Number(this.cardMessage.dataItemId)) {
        color = '#4996ff'
      } else {
        if (this.cardMessage.ststus === 1) {
          color = 'rgba(255, 116, 116)'
        }
        if (this.cardMessage.ststus === 3) {
          color = 'rgba(255, 177, 0)'
        }
        if (this.cardMessage.ststus === 2) {
          color = 'rgba(0, 181, 132)'
        } else {
          color = 'rgba(0, 181, 132)'
        }
      }

      return color
    },
    // // 发挥背景图
    // setbackimg() {
    //   let backurl = require('../../../../assets/bluecard.png')
    //   if (this.nowSelectDataItemId === this.cardMessage.dataItemId) {
    //     return 'background-image:url(' + backurl + ')'
    //   }
    // },
    getimageurl(id) {
      // let src = ''
      // switch (id) {
      //   case 14:
      //     src = require('@/assets/environment-data/illumination.png')
      //     break;
      //   case 13:
      //     src = require('@/assets/environment-data/kongqishidu.png')
      //     break;
      //   case 12:
      //     // 空气温度
      //     src = require('@/assets/environment-data/kongqiwendu.png')
      //     break;
      //   case 11:
      //     // 土壤湿度
      //     src = require('@/assets/environment-data/turangshidu.png')
      //     break;
      //   case 10:
      //     // 土壤温度
      //     src = require('@/assets/environment-data/humidity.png')
      //     break;
      //   default:
      //     src = require('@/assets/environment-data/PH.png')
      //     break;
      // }
      // return src
    }
  }
}
</script>
<style lang="scss" scoped>
.animation {
	-webkit-animation:twinkling 1.8s infinite ease-in-out;
	animation:twinkling 1.8s infinite ease-in-out;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.animation2 {
	-webkit-animation:twinkling 1.8s infinite ease-in-out;
	animation:twinkling 1.8s infinite ease-in-out;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}

@-webkit-keyframes twinkling {
	0% {
	opacity:0.2;
	filter:alpha(opacity=40);
	-webkit-transform:scale(1);
}
50% {
	opacity:0.8;
	filter:alpha(opacity=90);
	-webkit-transform:scale(1.12);
}
100% {
	opacity:0.2;
	filter:alpha(opacity=40);
	-webkit-transform:scale(1);
}
}
.green-main{
    width: 303px;
    height: 80px;
    padding: 10px;
    // background-image: url("~@/assets/greencard.png");
    // background-size: 300px 80px;
    // background-repeat: no-repeat;
    color: #fff;
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-radius: 12px;
    position: relative;
}
.box-border{
  position: absolute;
  border: 1px solid rgba(0, 181, 132);
  border-radius: 12px;
  width: 343px;
  height: 100px;
  top: -10px;
  left: -30px;
}
.center-data{
    width: 130px;
    height: 100%;
    padding: 0 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    white-space:nowrap;
    border-left: rgba(255, 255, 255, 0.763) dashed 1px;
    border-right: rgba(255, 255, 255, 0.763) dashed 1px;
    .data-one{
        font-size: 14px;
        line-height: 25px;
        font-weight: 700;
        font-size: 23px;
        white-space: nowrap;
    }
    .data-two{
        line-height: 20px;
        font-size: 14px;
        font-weight: 500;
    }
    .data-three{
        font-size: 16px;
        font-weight: 700;
    }
}
.right-data{
    width: 85px;
    padding: 0 5px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    white-space: pre-wrap;
    font-size: 14px;
    line-height: 21px;
    font-weight: 600;
}
.left-data{
    width: 60px;
    height: 100%;
    line-height: 10px;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    padding: 0 5px;
}
.ani{
    animation: .1s linear infinite blink;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 25px;
    -webkit-animation: mymove .3s linear infinite blink;
}
@keyframes mymove{
  0% {
    color: #fff;
     background-color: #ddd;
  }
  50% {
     background-color: #ddd;
  }
  100% {
    color: #fff;
     background-color: rgb(209, 3, 3);
  }
}
.con-line{
  border-top: 2px #fff solid;
  height: 10px;
  width: 10px;
}
.circle-box{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
}
</style>
